<!--临时人员-->
<template>
  <div class="log">
    <basic-container>
      <avue-crud
          ref="crud"
          :data="tableData"
          :option="tableOption"
          :page.sync="page"
          :table-loading="tableLoading"
          @search-reset="searchReset"
          @on-load="getList"
          @search-change="searchChange"
          @size-change="sizeChange"
          @current-change="currentChange">
        <template slot="phone" slot-scope="scope">
          <p v-if="scope.row.eye === false" style="margin: 0">{{ scope.row.phone }}
            <i class="icon-huabanfuben" style="margin:0 0 0 5px;font-size: 15px!important;" @click="showPhone(scope)"/>
          </p>
          <p v-if="scope.row.eye === true" style="margin: 0">{{ scope.row.phone1 }}
            <i class="icon-yanjing1" style="margin:0 0 0 5px;font-size: 14px!important;" @click="showPhone(scope)"/>
          </p>
        </template>
        <template slot="identityId" slot-scope="scope">
          <p style="margin: 0" v-if="scope.row.identity === false && scope.row.identityId !== null">{{scope.row.identityId}}
            <i class="icon-huabanfuben" style="margin:0 0 0 5px;font-size: 15px!important;" @click="showIdentity(scope)"/>
          </p>
          <p style="margin: 0" v-if="scope.row.identity === true && scope.row.identityId !== null">{{scope.row.identityId1}}
            <i class="icon-yanjing1" style="margin:0 0 0 5px;font-size: 14px!important;" @click="showIdentity(scope)"/>
          </p>
          <p style="margin: 0" v-if="scope.row.identityId == null">无</p>
        </template>
        <template slot="photoAddress" slot-scope="scope">
          <div class="demo-image__preview photo">
            <el-image
                style="width: 40%; height: 40px; margin: 0 auto"
                class="avatar"
                :src="url"
                :preview-src-list="img">
            </el-image>
          </div>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import {temporaryList} from '@/api/people/temporary'
import {mapGetters} from 'vuex'
import {HOSTEL_OUT, HOSTEL_SEX} from '@/const/Hostel'
import {PERSON_DETAILS, PERSON_IDS} from "@/const/personDict";


export default {
  name: 'temporary',
  data() {
    return {
      phone:'',  //已打码手机号
      phone1:'', //未打码手机号
      identityId:'',  //已打码身份证
      identityId1:'', //未打码身份证
      tableData: [],
      searchForm: {},
      url:'',
      img:[],
      avatar: "",
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: {
        border: true,  //竖线边框
        index: true,  //表格序号
        indexLabel: '序号',  //序号的标题
        stripe: true,  //是否显示表格的斑马条纹
        menuAlign: 'center',  //菜单栏对齐方式
        menuWidth: 210,  //操作菜单栏的宽度
        align: 'center',  //表格列对其方式
        emptyBtnText: '重置', //清空按钮文案
        searchMenuSpan: 6,  //搜索按钮长度
        addBtn: false,  //添加按钮
        delBtn: true,  //行内删除按钮
        editBtn: false,  //行内编辑按钮
        viewBtn: false,  //是否显示查看按钮
        selection: false,  //表格是否显示可选
        excelBtn: false,  //表格导出按钮是否显示
        refreshBtn: false,  //表格上面小的 刷新按钮
        columnBtn: false,  //表格上面小的 列表显隐按钮
        searchBtn: true,  //搜索按钮
        menu: false,   //是否显示操作栏
        searchLabelWidth: 86,
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: '拜访人',
            prop: 'name',
            search: true,
            dicData: HOSTEL_OUT,  //引入字典
          }, {
            label: '性别',
            prop: 'sex',
            search: true,
            type: 'select',  //搜索框显示类型
            dicData: HOSTEL_SEX,
            change: (value) => {
              this.searchForm.sex = value.value
              this.getList(this.page, this.searchForm)
            },
          },
          {
            label: '照片',
            width:100,
            prop: 'photoAddress',
            slot:true,
          }, {
            label: '手机号',
            prop: 'phone',
            slot: true, //加隐藏显示手机号
            viewDisplay: true,
          },
          {
            label: '身份证号',
            prop: 'identityId',
            dicData: PERSON_DETAILS,
            width: 165,
            slot: true, //加隐藏显示身份证号
          },
          {
            label: '拜访人单位',
            prop: 'unit',
          },
          {
            label: '被拜访人',
            prop: 'visitor',
          },
          {
            label: '拜访时间',
            prop: 'visitTime',
          },
          {
            label: '拜访人进入位置',
            prop: 'accessControlLocation',
          },
          {
            label: '申请时间',
            prop: 'createTime',
          },
          {
            label: '有无身份证',
            prop: 'identityIdIsNull',
            dicData: PERSON_IDS,
            hide:true,
            search: true,
            type: 'select',
            slot: true,
            change: (value) => {
              this.searchForm.identityIdIsNull = value.value
              this.getList(this.page, this.searchForm)
            },
          },

        ]
      }
    }
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  methods: {
    //显示隐藏手机号
    showPhone(scope) {
      if (scope.row.eye === false) {
        scope.row.eye = true
      } else if (scope.row.eye === true) {
        scope.row.eye = false
      }
    },

    //显示隐藏身份证号
    showIdentity(scope){
      if(scope.row.identity === false){
        scope.row.identity = true
      }else if(scope.row.identity === true){
        scope.row.identity = false
      }
    },

    //展示表格
    getList(page, params) {
      this.tableLoading = true
      this.url = ''
      this.img = []
      temporaryList(Object.assign({
        current: page.currentPage,
        size: page.pageSize,
        descs: 'create_time',  //是否倒序
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        let data = this.tableData
        for (let i=0;i<data.length;i++){
          let imgs = data[i].photoAddress
          this.avatar = '/campus/temporary/access/records/photo/'+imgs;
        }
        axios.get(this.avatar, {
          responseType: 'blob'
        }).then((res) => {
          this.url = window.URL.createObjectURL(res.data);
          this.img.push(this.url)
        })
        for(var i=0; i<response.data.data.records.length; i++) {
          let phone = response.data.data.records[i].phone
          if (phone !== null) {
            let newphone = phone.replace(/^(.{3})(?:\d+)(.{4})$/,"\$1****\$2");
            response.data.data.records[i].phone = newphone
            response.data.data.records[i].phone1 = phone
          }

          let identityId = response.data.data.records[i].identityId
          console.log(identityId)
          if (identityId !== null) {
            let newIdentityId = identityId.replace(/^(.{6})(?:\d+)(.{4})$/,"\$1********\$2");
            response.data.data.records[i].identityId = newIdentityId
            response.data.data.records[i].identityId1 = identityId
          }
        }
        this.tableData.map(item => {
          this.$set(item, 'eye')
          item.eye = false
        })
        this.tableData.map(item => {
          this.$set(item,'identity')
          item.identity  = false
        })
        this.page.total = response.data.data.total
        this.tableLoading = false
      })
    },

    //搜索页面内容
    searchChange(form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },

    //点击每页多少条会调size-change方法回调
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },

    //点击页码会调用current-change方法回调当前页
    currentChange(current) {
      this.page.currentPage = current
    },

    //清空时重置页面
    searchReset(){
      this.searchForm = {};
      this.getList(this.page)
    }
  }
}
</script>
<style scoped>
/deep/.el-image-viewer__img{
  max-width: 25% !important;
}
/deep/.el-form-item__label{
  text-align: left;
}
/deep/.avue-form__row{
  padding-left: 4px !important;
  padding-right: 36px!important;
}
/deep/.avue-crud__menu{
  display: none;
}
/deep/.avue-form__menu--center{
  text-align: left;
}
</style>
